<%- include("./header.html") %>
<%- include("./side.html") %>
<!-- 样式 -->
<link rel="stylesheet" href="/css/page.css">
<link rel="stylesheet" href="/css/page-detail.css">
<div class="container ajax mb150" id="pagesDetail" v-cloak>
   <div class="common-title">
        <h1 class="common-nav"><a href="/home/">首页</a>/<a href="/pages/">列表</a>/<a href="/pages/detail/">页面性能</a></h1>
        <commonsearch ></commonsearch>
    </div>
    <div class="common_table_nav">
        <li :class="{active:table==1}" @click="changeTable(1)">性能详情</li>
        <li :class="{active:table==2}" @click="changeTable(2)">ajax调用</li>
        <li :class="{active:table==3}" @click="changeTable(3)">页面慢加载追踪</li>
        <li :class="{active:table==4}" @click="changeTable(4)">资源慢加载追踪</li>
    </div>
    <!-- 页面平均耗时说明 -->
    <div class="block-time" v-show="table==1">
        <div class="item-full div1">
            <h1 class="h1">页面平均耗时</h1>
            <li>
                <h1>平均加载耗时(s)</h1>
                <h2 class="red">{{pagesItemData.loadTime|toFixed(true)}}</h2>
            </li>
            <li>
                <h1>平均白屏耗时(ms)</h1>
                <h2 class="red">{{pagesItemData.whiteTime|toFixed}}</h2>
            </li>
            <li>
                <h1>平均资源加载耗时(s)</h1>
                <h2 class="red">{{pagesItemData.resourceTime|toFixed(true)}}</h2>
            </li>
            <li>
                <h1>平均DOM构建耗时(s)</h1>
                <h2>{{pagesItemData.domTime|toFixed(true)}}</h2>
            </li>
            <li>
                <h1>平均解析DOM耗时(s)</h1>
                <h2>{{pagesItemData.analysisDomTime|toFixed(true)}}</h2>
            </li>
            <li>
                <h1>调用次数</h1>
                <h2>{{pagesItemData.count||0}}</h2>
            </li>
            <li>
                <h1>平均DNS解析耗时(ms)</h1>
                <h2>{{pagesItemData.dnsTime|toFixed}}</h2>
            </li>
            <li>
                <h1>平均TCP连接耗时(ms)</h1>
                <h2>{{pagesItemData.tcpTime|toFixed}}</h2>
            </li>
            <li>
                <h1>平均页面重定向耗时(ms)</h1>
                <h2>{{pagesItemData.redirectTime|toFixed}}</h2>
            </li>
            <li>
                <h1>平均unload耗时(ms)</h1>
                <h2>{{pagesItemData.unloadTime|toFixed}}</h2>
            </li>
            <li>
                <h1>平均request请求耗时(ms)</h1>
                <h2>{{pagesItemData.requestTime|toFixed}}</h2>
            </li>
            <li>
                <h1>平均页面准备耗时(ms)</h1>
                <h2>{{pagesItemData.readyTime|toFixed}}</h2>
            </li>
        </div>
    </div>
    <div class="block-time" v-show="table==1">
        <div class="item div2">
            <h1 class="h1">浏览器分类统计</h1>
            <div id="echartBorwsers-borwser" class="echartBorwsers"></div>
        </div>
        <div class="item div3">
            <h1 class="h1">系统分类统计</h1>
            <div id="echartBorwsers-system" class="echartBorwsers"></div>
        </div>
        <div class="item div3">
            <h1 class="h1">地理位置分类统计</h1>
            <div id="echartBorwsers-address" class="echartBorwsers"></div>
        </div>
    </div>

    <!-- page详情性能列表 -->
    <div class="common-head-title" v-show="table==1">
        <h1>页面性能详情 <button class="button" @click="showCharts">charts表</button></h1> 
        <!-- <div class="table-box main-block" v-show="table==1"> -->
            <div v-show="listdata.length&&!isShowCharts">
                <table class="table">
                    <thead>
                        <tr>
                            <th class="break-word">URL</th>
                            <th>页面加载时间</th>
                            <th>白屏时间</th>
                            <th>资源加载耗时</th>
                            <th>DOM构建时间</th>
                            <th>解析dom耗时</th>
                            <th>DNS解析时间</th>
                            <th>TCP连接时间</th>
                            <th>页面重定向时间</th>
                            <th>unload时间</th>
                            <th>request请求耗时</th>
                            <th>页面准备时间</th> 
                            <th>页面请求时间</th>
                            <th>操作</th>  
                        </tr>
                    </thead>
                    <tr v-for="(item,index) in listdata" :key="index">
                        <td ><a :href="'/pages/detail/item?id='+item.id" :title="item.url">{{item.url}}</a></td>
                        <td class="tc red">{{item.loadTime|toFixed(true)}}</td>
                        <td class="tc red">{{item.whiteTime|toFixed}}</td>
                        <td class="tc red"><a :href="'/pages/detail/item?id='+item.id">{{item.resourceTime|toFixed(true)}}</a></td>
                        <td class="tc red">{{item.domTime|toFixed(true)}}</td>
                        <td class="tc">{{item.analysisDomTime|toFixed(true)}}</td>
                        <td class="tc">{{item.dnsTime|toFixed}}</td>
                        <td class="tc">{{item.tcpTime|toFixed}}</td>
                        <td class="tc">{{item.redirectTime|toFixed}}</td>
                        <td class="tc">{{item.unloadTime|toFixed}}</td>
                        <td class="tc">{{item.requestTime|toFixed}}</td>
                        <td class="tc">{{item.readyTime|toFixed}}</td>
                        <td class="tc">{{item.dateTime}}</td>
                        <td class="tc"><a :href="'/pages/detail/item?id='+item.id">详情</a></td>
                    </tr>
                </table>
                <!--  分页 -->
                <div class="tc common_page_style">
                    <div id="copot-page-pages" class="copot-page"></div>
                </div>
            </div>
            <div v-show="!listdata.length&&!isLoadEnd" class="loading-block"></div>
            <div v-show="!listdata.length&&isLoadEnd" class="common-no-data">暂无数据!</div>
        <!-- </div> -->
        <div id="charts-pages" v-show="isShowCharts" class="charts-pages"></div>
    </div>
    <!-- 页面ajax资源分析 -->
    <div class="table-box main-block" v-show="table==2">
        <div v-show="listAjax.length">
            <table class="table">
                <thead>
                    <tr>
                        <th class="break-word">AJAX地址</th>
                        <th>ajax加载耗时</th>
                        <th>返回资源大小</th>
                        <th>请求url</th>
                    </tr>
                </thead>
                <tr v-for="(item,index) in listAjax" :key="index">
                    <td><span><a href="javascript:" @click="gotoAjaxDetail(item)">{{item.name}}</a></span></td>
                    <td class="tc">{{item.duration|toFixed(true)}}</td>
                    <td class="tc">{{item.decodedBodySize|toSize}}</td>
                    <td >{{item.callUrl|limitTo(50)}}</td>
                </tr>
            </table>
            <!--  分页 -->
            <div class="tc common_page_style">
                <div id="copot-page-ajax" class="copot-page"></div>
            </div>
        </div>
        <div v-show="!listAjax.length&&!isLoadEnd" class="loading-block"></div>
        <div v-show="!listAjax.length&&isLoadEnd" class="common-no-data">暂无数据!</div>
    </div>
    <!-- 页面慢加载 -->
    <div class="table-box main-block" v-show="table==3">
        <div v-show="listslowpages.length">
            <table class="table">
                <thead>
                    <tr>
                        <th class="break-word">URL</th>
                        <th>页面总耗时</th>
                        <th>页面加载时间</th>
                        <th>白屏时间</th>
                        <th>资源加载耗时</th>
                        <th>DOM构建时间</th>
                        <th>解析dom耗时</th>
                        <th>页面准备时间</th> 
                        <th>创建时间</th>
                    </tr>
                </thead>
                <tr v-for="(item,index) in listslowpages" :key="index">
                    <td><a :href="'/pages/detail/item?id='+item.id+'&type=slow'" :title="item.url">{{item.url|limitTo(40)}}</a></td>
                    <td class="tc red">{{(item.loadTime+item.resourceTime)|toFixed(true)}}</td>
                    <td class="tc">{{item.loadTime|toFixed(true)}}</td>
                    <td class="tc">{{item.whiteTime|toFixed}}</td>
                    <td class="tc"><a :href="'/pages/detail/item?id='+item.id+'&type=slow'">{{item.resourceTime|toFixed(true)}}</a></td>
                    <td class="tc">{{item.domTime|toFixed(true)}}</td>
                    <td class="tc">{{item.analysisDomTime|toFixed(true)}}</td>
                    <td class="tc">{{item.readyTime|toFixed}}</td>
                    <td class="tc">{{item.createTime|date('/',true)}}</td>
                </tr>
            </table>
            <!--  分页 -->
            <div class="tc common_page_style">
                <div id="copot-page-slowpages" class="copot-page"></div>
            </div>
        </div>
        <div v-show="!listslowpages.length&&!isLoadEnd" class="loading-block"></div>
        <div v-show="!listslowpages.length&&isLoadEnd" class="common-no-data">暂无数据!</div>
    </div>
    <!-- 页面慢资源加载 -->
    <div class="table-box main-block" v-show="table==4">
        <div v-show="listresources.length">
            <table class="table">
                <thead>
                    <tr>
                        <th class="break-word">URL</th>
                        <th>资源加载耗时</th>
                        <th>资源返回大小</th>
                        <th>请求url</th>
                        <th>创建时间</th>
                    </tr>
                </thead>
                <tr v-for="(item,index) in listresources" :key="index">
                    <td><span><a href="javascript:" @click="gotoSourcesDetail(item)">{{item.name}}</a></span></td>
                    <td class="tc red">{{item.duration|toFixed(true)}}</td>
                    <td class="tc">{{item.decodedBodySize|toSize}}</td>
                    <td >{{item.callUrl|limitTo(50)}}</td>
                    <td class="tc">{{item.createTime|date('/',true)}}</td>
                </tr>
            </table>
            <!--  分页 -->
            <div class="tc common_page_style">
                <div id="copot-page-slowresources" class="copot-page"></div>
            </div>
        </div>
        <div v-show="!listresources.length&&!isLoadEnd" class="loading-block"></div>
        <div v-show="!listresources.length&&isLoadEnd" class="common-no-data">暂无数据!</div>
    </div>
</div>
<script src="/js/Page.js"></script>
<script src="/js/view-page-detail.js"></script>
